<template>
  <div class="button" v-for="index in 500" :key="index">
    <el-button type="primary" :style="{ backgroundColor: colors[index - 1] }" @click="changeColor(index - 1)">
      {{ index }}
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colors: [],
    };
  },
  created() {
    // 初始化随机颜色
    for (let i = 0; i < 500; i++) {
      this.colors.push(this.otherColor());
    }
  },
  methods: {
    // 生成随机颜色
    otherColor() {
      const red = Math.floor(Math.random() * 256);
      const green = Math.floor(Math.random() * 256);
      const blue = Math.floor(Math.random() * 256);
      return `rgba(${red}, ${green}, ${blue}, 0.5)`;
    },
    // 改变颜色
    changeColor(index) {
      this.colors[index] = this.otherColor();
    }

  }
}

</script>

<style scoped>
.button {
  display: inline-block;
  margin: 10px;
}
</style>
